<template>
  <a-list
    :locale="locale"
    item-layout="vertical"
    size="large"
    :data-source="listData"
  >
    <template #renderItem="{ item }">
      <a-list-item key="item.title">
        <!-- 小图标展示 -->
        <template #actions>
          <span>
            <component
              :is="PayCircleOutlined"
              style="margin-right: 8px; color: #ff0036"
            />
            <span style="font-weight: bold; color: #ff0036">{{
              towNumber(item.price)
            }}</span>
          </span>
          <span>
            <component
              :is="DingtalkOutlined"
              style="margin-right: 8px; color: #ff0036"
            />
            <span style="font-weight: bold; color: black">{{
              item.brand
            }}</span>
          </span>
          <span>
            <StarOutlined style="color: #E6A23C;"/>
            {{ item.collectNum }}
          </span>
          <span>
            <MessageOutlined style="color: #409EFF;"/>
            {{ item.commentNum }}
          </span>
          <span>
            <EyeOutlined style="color: #67C23A;"/>
            {{ item.browse }}
          </span>
          <span>
            <a-button
              style="margin-left: 10px"
              type="primary"
              size="small"
              danger
              ghost
              @click="deleteCollectGoods(item.key)"
              >取消收藏</a-button
            >
          </span>
        </template>
        <!-- 最右侧图片 -->
        <template #extra>
          <img
            width="100"
            alt="logo"
            :src="item.image"
            style="border-radius: 10px"
          />
        </template>
        <a-list-item-meta>
          <template #title>
            <router-link to="" @click="toShop(item.storeId)">
              <h3 style="font-weight: bold">
                {{ item.homeName }}
              </h3>
            </router-link>
          </template>
          <template #avatar
            ><a-avatar size="large" :src="item.storeImage"
          /></template>
        </a-list-item-meta>
        <router-link @click="toDetail(item.goodsId)" to="">
          <span style="font-weight: bold; font-size: 16px">
            {{ item.name }}
          </span>
        </router-link>
      </a-list-item>
    </template>
  </a-list>
  <!-- 分页 -->
  <div
    style="
      height: 40px;
      width: 100%;
      margin-top: 10px;
      display: flex;
      justify-content: center;
    "
  >
    <a-pagination
      v-model:current="pageNo"
      v-model:page-size="pageSize"
      :total="total"
      @change="handlePageChange"
    />
  </div>
</template>
<script setup>
import {
  DingtalkOutlined,
  PayCircleOutlined,
  StarOutlined,
  EyeOutlined,
  MessageOutlined
} from "@ant-design/icons-vue";
import router from "@/router";
import { ref, onMounted } from "vue";
import { getCollectGoodsList, cancelCollectGoods } from "@/api/collectgoods";
import { useUserStore } from "@/stores/user";
import { message } from "ant-design-vue";

const listData = ref([]);
const userStore = useUserStore();

const pageNo = ref(1);
const pageSize = ref(4);
const total = ref(0);
onMounted(() => {
  getCollectedGoods();
});

//获取收藏商品数据方法
function getCollectedGoods() {
  getCollectGoodsList(pageNo.value, pageSize.value, userStore.user.key).then(
    (res) => {
      if (res.code == 200 && res.data !== null) {
        listData.value = res.data.data;
        total.value = res.data.total;
      } else {
        listData.value = [];
        total.value = 0;
      }
    }
  );
}

//监听分页变化
function handlePageChange(param1, param2) {
  pageNo.value = param1;
  pageSize.value = param2;
  getCollectedGoods();
}

//去商品详情页
function toDetail(id) {
  router.push({ name: "Detail", query: { id: id } });
}

//取消收藏
function deleteCollectGoods(id) {
  cancelCollectGoods(id).then((res) => {
    if (res.code === 200) {
      message.success("取消成功！");
      if (pageNo.value !== 1) {
        pageNo.value -= 1;
      }
      getCollectedGoods();
    }
  });
}

function toShop(storeId) {
  router.push({ name: "Shop", query: { id: storeId } });
}

const locale = ref({
  emptyText: "暂无收藏宝贝！",
});

//展示价格的小数方法
function towNumber(val) {
  return val.toFixed(2);
}
</script>

<style scoped>
a:hover{
  color: red;
}
.toUser {
  border-bottom: 1px solid #f2f2f2;
  padding: 0 0 5px;
  margin-bottom: 5px;
  line-height: 18px;
  font-weight: 700;
  height: 30px;
}

.btn {
  transform: scale(1);
}

.btn:active {
  transform: scale(0.97);
}

.update_tag {
  transform: scale(1);
}

.update_tag:active {
  transform: scale(0.8);
}

.everyOne {
  margin-top: 20px;
  padding-left: 10px;
}

.order_item {
  font-size: 16px;
  font-weight: bold;
}
</style>
